<script setup>
import DSLogo from '@/components/DSLogo.vue'
import {
  SettingIcon,
  CaretDownSmallIcon,
  MailIcon,
  LogoGithubIcon,
  VerifyIcon,
  MoreIcon,
  PersonalInformationIcon,
  RollfrontIcon,
  CpuIcon,
  City1Icon,
  City12Icon,
  TreeRoundDotVerticalIcon,
  BookIcon,
  SearchIcon,
  SystemRegulationIcon,
  InkIcon,
  ControlPlatformIcon,
  ShieldErrorIcon
} from 'tdesign-icons-vue-next'
import { DialogPlugin, MessagePlugin, LoadingPlugin } from 'tdesign-vue-next'
import { ref, reactive } from 'vue'
import User from '../class/dto/user'
import { useAuthStore } from '@/stores/AuthToken.js'
import { useRouter } from 'vue-router'

const router = useRouter()

// 高校信息管理跳转
const collegeRegisterDialog = ref(false)
const confirmBtn = ref(true)
const goCollegeManage = () => {
  /**
   * 检测用户是否为管理员
   *   是 -->
   *     检测管理员是否已注册高校
   *        未注册高校 --> 给出提示 --> 弹出高校注册确认框 -->跳转
   *        已注册高校 --> 跳转高校信息管理
   *   否 --> 给出权限不足提示
   */
  const auth = useAuthStore().auth

  switch (auth.authority) {
    case 4101:
    case 4102:
      MessagePlugin.error('系统错误！！您的权限不足')
      break
    case 4103:
      // 跳转管理界面
      break
    case 4104:
      {
        // 确认为系统管理员 --> 且高校未注册
        const confirmDia = DialogPlugin({
          theme: 'info',
          header: '高校信息提示',
          body: '尊敬的系统管理员，当前无法检测到您的高校信息，是否准备进行高校注册？',
          cancelBtn: '取消',
          confirmBtn: '确认',
          onConfirm: () => {
            confirmDia.hide()
            collegeRegisterDialog.value = true
          },
          onClose: () => confirmDia.hide()
        })
      }
      break
    default:
      {
        MessagePlugin.error({
          content: '系统错误！！！请重新登录...',
          onDurationEnd: () => router.push('/login')
        })
      }
      break
  }
  return
}
const goCollegeDialogLoading = () => {
  confirmBtn.value = true
  const timer = setTimeout(() => {
    confirmBtn.value = false
    clearTimeout(timer)
  }, 3000)
}
const goCollegeRegister = () => {
  const instance = LoadingPlugin({
    fullscreen: true,
    attach: 'body',
    preventScrollThrough: false
  })
  const timer = setTimeout(() => {
    instance.hide()
    router.push('/collegeRegister')
    clearTimeout(timer)
  }, 1000)
}

const userInfo = reactive(
  new User(
    '1',
    '2127969635',
    'xiaowan',
    'https://pic1.zhimg.com/v2-1fd7f5463e17e2cc615ba093a1f20548_r.jpg',
    '仅有内容区域的卡片形式。卡片内容区域可以是文字、图片、表单、表格等形式信息内容可使用大中小不同的卡片尺寸，按业务需求进行呈现。'
  )
)
</script>

<template>
  <t-layout class="container">
    <t-content style="width: 100%">
      <t-head-menu theme="light" expand-type="popup">
        <template #logo>
          <DSLogo />
        </template>
        <t-submenu value="0" title="我的首页">
          <template #icon><CpuIcon /></template>
        </t-submenu>
        <t-submenu value="1" title="公寓选调">
          <template #icon><City12Icon /></template>
        </t-submenu>
        <t-submenu value="2" title="数据分析">
          <template #icon><TreeRoundDotVerticalIcon /></template>
        </t-submenu>
        <t-submenu value="3" title="信息中心">
          <template #icon><BookIcon /></template>
          <t-menu-item value="3-1" content="高校信息管理" @click="goCollegeManage">
            <template #icon><SystemRegulationIcon /></template>
          </t-menu-item>
        </t-submenu>

        <template #operations>
          <t-button class="operations-button" variant="text" shape="square">
            <template #icon><SearchIcon /></template>
          </t-button>
          <t-button class="operations-button" variant="text" shape="square">
            <template #icon><MailIcon /></template>
          </t-button>
          <t-button class="operations-button" variant="text" shape="square">
            <template #icon><LogoGithubIcon /></template>
          </t-button>
          <t-button class="operations-button" variant="text" shape="square">
            <template #icon><SettingIcon /></template>
          </t-button>
          <t-dropdown
            trigger="hover"
            maxColumnWidth="500px"
            minColumnWidth="100px"
            :maxHeight="500"
            :divider="true"
            :hideAfterItemClick="false"
          >
            <t-button style="margin-right: 10px" variant="text">
              <t-space :size="7" class="avatar-space">
                <t-avatar :image="userInfo.avatar" size="small"> </t-avatar>
                <p>xiaowan</p>
              </t-space>
              <template #suffix> <CaretDownSmallIcon size="16" /></template>
            </t-button>
            <t-dropdown-menu>
              <t-space style="width: 340px; background-color: white">
                <t-card size="small" :bordered="false" :hoverShadow="true" :shadow="true">
                  <template #title>
                    <VerifyIcon style="margin-left: 5px; margin-right: 10px" />身份卡片
                  </template>
                  <t-space>
                    <img src="../assets/img/type-students.svg" style="width: 100px" />
                    <table
                      style="font-size: 12px; color: rgb(122, 122, 122)"
                      :style="
                        userInfo.intro.length < 20
                          ? ('word-break: break-word', 'white-space: pre-line')
                          : ''
                      "
                    >
                      <tr>
                        <th style="padding: 0px 10px">账号</th>
                        <td style="padding: 0px 10px">{{ userInfo.username }}</td>
                      </tr>
                      <tr>
                        <th style="padding: 0px 10px">用户昵称</th>
                        <td style="padding: 0px 10px">{{ userInfo.nickname }}</td>
                      </tr>
                      <tr>
                        <th style="padding: 0px 10px">用户简介</th>
                        <td style="padding: 0px 10px; width: 100px">
                          {{
                            userInfo.intro.length < 20
                              ? userInfo.intro
                              : userInfo.intro.slice(0, 5) + '...'
                          }}
                        </td>
                      </tr>
                    </table>
                  </t-space>
                  <template #actions>
                    <t-dropdown>
                      <t-button variant="text" shape="square">
                        <MoreIcon />
                      </t-button>
                      <t-dropdown-menu>
                        <t-dropdown-item>
                          <t-popup content="个人中心" :showArrow="true">
                            <PersonalInformationIcon />
                          </t-popup>
                        </t-dropdown-item>
                        <t-dropdown-item>
                          <t-popup content="退出登录" :showArrow="true"><RollfrontIcon /></t-popup>
                        </t-dropdown-item>
                      </t-dropdown-menu>
                    </t-dropdown>
                  </template>

                  <!--  -->
                </t-card>
              </t-space>
            </t-dropdown-menu>
          </t-dropdown>
        </template>
      </t-head-menu>

      <!-- 高校注册确认框 -->
      <t-dialog
        v-model:visible="collegeRegisterDialog"
        :closeOnOverlayClick="false"
        theme="warning"
        header="高校注册提示"
        :on-opened="goCollegeDialogLoading"
      >
        <template #body>
          <p style="color: rgb(156, 156, 156); font-size: 12px">
            <b>注册说明：</b>完成高校注册需要您提供以下注册材料，请确保您所准备的材料足够精确、完整
          </p>
          <t-space style="margin: 10px 0px">
            <t-card :bordered="false" size="small" :shadow="true">
              <t-space :size="4" direction="vertical" style="padding: 10px 0px">
                <City1Icon size="50px" style="margin-left: 8px" />
                <b>学校基础信息</b>
              </t-space>
            </t-card>
            <t-card :bordered="false" size="small" :shadow="true">
              <t-space :size="4" direction="vertical" style="padding: 10px 0px">
                <ControlPlatformIcon size="50px" style="margin-left: 8px" />
                <b>公寓实体3d建模</b>
              </t-space>
            </t-card>
            <t-card :bordered="false" size="small" :shadow="true">
              <t-space :size="4" direction="vertical" style="padding: 10px 0px">
                <InkIcon size="50px" style="margin-left: 8px" />
                <b>在校人员数据</b>
              </t-space>
            </t-card>
            <t-card :bordered="false" size="small" :shadow="true">
              <t-space :size="4" direction="vertical" style="padding: 10px 0px">
                <SystemRegulationIcon size="50px" style="margin-left: 8px" />
                <b>2d平面节点</b>
              </t-space>
            </t-card>
          </t-space>
          <t-card size="small" :bordered="false">
            <p style="color: rgb(116, 116, 116)">
              <ShieldErrorIcon size="18px" style="color: rgb(210, 27, 27)" />
              为了本次注册服务的顺利实施，建议您使用性能较好的机器进行注册，并且确保机器电量足够，网络通畅。
              若外部原因造成本次注册中断，本系统将不会保存已有数据 。
            </p>
          </t-card>
        </template>
        <template #confirmBtn>
          <t-button @click="goCollegeRegister" :loading="confirmBtn" :disabled="confirmBtn">
            已确保注册条件，开始注册
          </t-button>
        </template>
      </t-dialog>
    </t-content>
  </t-layout>
</template>

<style scoped lang="scss">
@import '../style/common.scss';
.container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  @include cf;

  .avatar-space {
    @include cf;
    flex-direction: row;
    padding: 15px 0;
  }

  .operations-button {
    margin: 0 6px;
  }

  .card-dialog {
    width: 100%;
    @include cf;
  }
}
</style>
